<template>
  <div class="upper-air-element">
    <table>
      <tr>
        <td></td>
        <td v-for="height in heightNumberList" :key="height">
          {{ height }}
        </td>
      </tr>
      <tr v-for="item in upperAirList" :key="item.id">
        <td class="name">{{ item.name }}</td>
        <td v-for="height in heightNumberList" :key="height">
          <div @click="changeSquare(item.id, height)" class="square"
            :class="isChecked(item.id, height) ? 'active' : null" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'UpperAir',
  props: ["upperAir", 'upperAirList', 'heightNumberList'],
  model: { prop: "upperAir", event: "change" },
  methods: {
    isChecked(product, height) {
      return this.upperAir.find(item => item?.product == product && item?.height == height)
    },
    changeSquare(product, height) {
      const hasProduct = this.isChecked(product, height)
      if (hasProduct) {
        this.$emit('change', this.upperAir.filter(item => item.product != product || item.height != height))
      } else {
        this.$emit("change", [...this.upperAir, { product, height }]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.upper-air-element {
  display: grid;

  table {
    td {
      text-align: center;
      color: #FFF;
      font-size: 14px;
      line-height: 16px;
      // width: 32px;
    }

    .name {
      text-align: right;
      // width: 60px;
    }

    .square {
      cursor: pointer;
      display: inline-block;
      width: 18px;
      height: 8px;
      background: #0C5D96;

      &.active {
        background: #81EEFF;
      }
    }
  }
}
</style>